<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/my/my.css">
    <link rel="stylesheet" href="/my/manage.css">

    <title>北京自考社区</title>
    <style>
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }
        .message-item a{
            color: #5FB878;
        }
    </style>
</head>

<!--<style>-->
<!--    .my-nav-tree{-->
<!--        background-color: #FFFFFF;-->
<!--        float: left;-->
<!--    }-->
<!--    .my-nav-tree a{-->
<!--        color: #222226 !important;-->
<!--    }-->
<!--    .my-nav-tree a:hover{-->
<!--        background-color: #F0F0F5;-->
<!--    }-->
<!--    /* 可以通过margin和width:auto配合，来实现div宽度剩余填充-->
<!--        注：宽度剩余填充的块，不要设置浮动 -->
<!--    */-->
<!--    .my-nav-tree-content{-->
<!--        margin-left: 212px;-->
<!--        width: auto;-->
<!--        height: auto;-->
<!--    }-->
<!--    .my-nav-tree-content .my-hide{-->
<!--        display: none;-->
<!--    }-->
<!--    .my-nav-tree-item{-->
<!--        width: 100%;-->
<!--        min-height: 600px;-->
<!--        height: auto;-->
<!--        background-color: #FFFFFF;-->
<!--    }-->

<!--    .userBaseInfoDiv{-->
<!--        padding: 12px;-->
<!--    }-->
<!--    /* 因为浮动，导致父块失去高度，通过设置overflow：hidden可以解决问题 */-->
<!--    .my-navTree-form{-->
<!--        overflow: hidden;-->
<!--        margin-top: 20px;-->
<!--    }-->
<!--    .my-navTree-form input{-->
<!--        width: auto;-->
<!--        min-width: 700px;-->
<!--    }-->
<!--    .my-navTree-form-item{-->
<!--        float: left;-->
<!--    }-->
<!--</style>-->

<body>
<!-- header -->
<th:block th:include="common::header"></th:block>

    <!-- main -->
    <div class="layui-container re-layui-container my-main">
        <ul class="layui-nav layui-nav-tree my-nav-tree" lay-filter="test">
            <li id="li-navTree1" class="layui-nav-item" onclick="navTab('navTree1')"><a class="my-title-1" style="font-weight: bold;" href="javascript:;">基本信息</a></li>
            <li id="li-navTree2" class="layui-nav-item">
                <a class="my-title-1" style="font-weight: bold;" href="javascript:;">我的文章</a>
                <dl class="layui-nav-child">
                    <dd onclick="navTab('navTree2-1')"><a href="javascript:;">我的收藏</a></dd>
                    <dd onclick="navTab('navTree2-2')"><a href="javascript:;">我的草稿</a></dd>
                    <dd onclick="navTab('navTree2-3')"><a href="javascript:;">我的文章</a></dd>
                </dl>
            </li>
            <li id="li-navTree3" class="layui-nav-item">
                <a class="my-title-1" style="font-weight: bold;" href="javascript:;">我的问答</a>
                <dl class="layui-nav-child">
                    <dd onclick="navTab('navTree3-1')"><a href="javascript:;">我的提问</a></dd>
                    <dd onclick="navTab('navTree3-2')"><a href="javascript:;">我的收藏</a></dd>
                </dl>
            </li>
            <li id="li-navTree4" class="layui-nav-item" onclick="navTab('navTree4')"><a class="my-title-1" style="font-weight: bold;" href="javascript:;">消息通知</a><span th:if="${session.messageRemind}" style="margin-left: 100px;" class="layui-badge-dot"></span></li>
        </ul>
        <div class="my-nav-tree-content">
            <div id="navTree1" class="my-nav-tree-item my-hide userBaseInfoDiv">
                <h2 style="padding-top:6px;padding-left: 6px;">基本资料</h2>
                <div id="div-form-navTree1"></div>
                <form id="form-navTree1" class="layui-form my-navTree-form" action="javascript:;">
                    <div class="layui-form-item my-navTree-form-item">
                        <div style="padding-left: 400px;" class="layui-upload">
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="profile" th:src="${user.profileUrl}">
                                <p id="uploadProfileText"></p>
                            </div>
                            <button style="display: none" type="button" class="layui-btn" id="uploadProfileBtn">上传头像</button>
                        </div>
                    </div>

                    <div class="layui-form-item my-navTree-form-item">
                        <label class="layui-form-label">昵称</label>
                        <div class="layui-input-block">
                            <input id="name-navTree1" disabled="true" type="text" name="title" th:value="${user.name}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item my-navTree-form-item gender-navTree1">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block" id="show-gender-navTree1">
                            <input th:if="${user.gender} == 1" disabled="true" type="text" name="title" placeholder="男" class="layui-input">
                            <input th:if="${user.gender} == 0" disabled="true" type="text" name="title" placeholder="女" class="layui-input">
                        </div>
                        <div style="display: none" class="layui-input-block" id="gender-navTree1">
                            <input type="radio" name="gender" value="1" title="男" th:checked="${user.gender} == 1">
                            <input type="radio" name="gender" value="0" title="女" th:checked="${user.gender} == 0">
                        </div>
                    </div>
                    <div class="layui-form-item my-navTree-form-item">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-block">
                            <input id="age-navTree1" disabled="true" type="text" name="age" th:value="${user.age}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item my-navTree-form-item">
                        <label class="layui-form-label">地址</label>
                        <div class="layui-input-block">
                            <input id="address-navTree1" disabled="true" type="text" name="address" th:value="${user.address}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item my-navTree-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input disabled="true" type="text" name="email" th:value="${user.email}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item my-navTree-form-item" id="div-update-navTree1">
                        <div class="layui-input-block">
                            <button id="update-navTree1" class="layui-btn">修改资料</button>
                        </div>
                    </div>
                    <div style="display: none" class="layui-form-item my-navTree-form-item" id="div-submit-navTree1">
                        <div class="layui-input-block">
                            <button id="cancel-navTree1" class="layui-btn">取消</button>
                            <button id="submit-navTree1" class="layui-btn">提交</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="my-nav-tree-item my-hide">
                <div id="navTree2-1"  style="padding: 12px"  class="my-nav-tree-child-item my-hide">
                    <div id="articleCollectList"></div>
                </div>
                <div id="navTree2-2" style="padding: 12px" class="my-nav-tree-child-item my-hide">
                    <div id="articleDraftList"></div>
                </div>
                <div id="navTree2-3" style="padding: 12px" class="my-nav-tree-child-item my-hide">
                    <div id="articlePublishList"></div>
                </div>
            </div>
            <div class="my-nav-tree-item my-hide">
                <div id="navTree3-1" style="padding: 12px"  class="my-nav-tree-child-item my-hide">
                    <div id="questoinList"></div>
                </div>
                <div id="navTree3-2" class="my-nav-tree-child-item my-hide">
                    <div id="questionCollectList"></div>
                </div>
            </div>
            <div id="navTree4" class="my-nav-tree-item my-hide userBaseInfoDiv">
                <div style="padding: 6px;" id="messageList"></div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <th:block th:include="common::footer"></th:block>
</body>
<script src="/jquery-3.5.1.js"></script>
<script src="/layui/layui.js"></script>
<script src="/my/my.js"></script>

<script th:inline="javascript">
    var userId = [[${user.id}]];
    var currTab = [[${currTab}]];
    var userEmail = [[${user.email}]];
    var messageList = null;

    // 页面初始化
    $(document).ready(function () {
        if (currTab == null){
            $("#li-navTree1").click();
            $("#li-navTree1").addClass("layui-this");
        }
    });

    layui.use(['element', 'table','upload','laytpl'], function () {
        var element = layui.element;
        var table = layui.table;
        var upload = layui.upload;
        var laytpl = layui.laytpl;

        // 监听写文章
        $(document).on('click','#writeArticle',function(){
            var user = [[${#httpSession.getAttribute('user')}]];
            if (!user) {
                layer.open({
                    type: 0,
                    content: "请先登录"
                });
            } else {
                window.open('/article/article/writeArticle');
            }
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadProfileBtn'
            ,url: '/common/sysfile/upload' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#profile').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                console.log("res:",res);
                //如果上传失败
                if(res.code != 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                if (res.code == 0){
                    console.log("上传成功");
                    $('#profile').attr('src', res.data.src); //图片链接（base64）
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#uploadProfileText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        // 监听修改个人信息
        $(document).on('click','#update-navTree1',function(){
            $("#gender-man-navTree1").attr("disabled",false);
            $("#gender-girl-navTree1").attr("disabled",false);
            $("#age-navTree1").attr("disabled",false);
            $("#address-navTree1").attr("disabled",false);

            $("#uploadProfileBtn").css("display","block");
            $("#show-gender-navTree1").css("display","none");
            $("#gender-navTree1").css("display","block");
            $("#div-submit-navTree1").css("display","block");
            $("#div-update-navTree1").css("display","none");
        });
        $(document).on('click','#cancel-navTree1',function(){
            $("#gender-man-navTree1").attr("disabled",true);
            $("#gender-girl-navTree1").attr("disabled",true);
            $("#age-navTree1").attr("disabled",true);
            $("#address-navTree1").attr("disabled",true);

            $("#uploadProfileBtn").css("display","none");
            $("#show-gender-navTree1").css("display","block");
            $("#gender-navTree1").css("display","none");
            $("#div-update-navTree1").css("display","block");
            $("#div-submit-navTree1").css("display","none");
        });
        $(document).on('click','#submit-navTree1',function(){
            // 提交修改
            var name = $("#name-navTree1").val();
            var age = $("#age-navTree1").val();
            var address = $("#address-navTree1").val();
            var gender = $("#gender-navTree1 input[name='gender']:checked").val();
            var profileUrl = $("#profile").attr("src");

            var userData = {
              "name":name,
              "age":age,
              "address":address,
              "gender":gender,
              "profileUrl":profileUrl,
              "id":userId
            };
            console.log("userData:",userData);
            $.ajax({
                url: '/user/user/update',
                type: 'post',
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(userData),
                success: function (obj) {
                    if (obj.code == 200){
                        layer.open({
                            type: 0,
                            content: "修改成功，重新登录后可以看到效果"
                        });
                    }else{
                        layer.open({
                            type: 0,
                            content: "修改失败 "+obj.msg
                        });
                    }
                }
            });

            // 处理页面
            $("#title-navTree1").attr("disabled",true);
            $("#gender-man-navTree1").attr("disabled",true);
            $("#gender-girl-navTree1").attr("disabled",true);
            $("#age-navTree1").attr("disabled",true);
            $("#address-navTree1").attr("disabled",true);

            $("#uploadProfileBtn").css("display","none");
            $("#show-gender-navTree1").css("display","block");
            $("#gender-navTree1").css("display","none");
            $("#div-update-navTree1").css("display","block");
            $("#div-submit-navTree1").css("display","none");
        });
    });

    // navTab：控制树型菜单的切换
    var navTab_preParam = null; // 声明一个变量，用于保存navTab函数每次的调用参数
    function navTab(param){
        // 1. 清除上次的点击效果
        if(navTab_preParam){
            if(navTab_preParam.search("-") != -1){
                $("#"+navTab_preParam).parent(".my-nav-tree-item").removeClass('layui-show')
            }
            $("#"+navTab_preParam).removeClass('layui-show')
        }
        // 2.处理当次点击
        // 先判断当前传入的param是父菜单还是子菜单
        // 如果是字节点则需要先处理其父节点
        if(param.search("-") != -1){
            $("#"+param).parent(".my-nav-tree-item").addClass('layui-show')
        }
        $("#"+param).addClass('layui-show')

        // 3.保存当次参数
        navTab_preParam = param;

        // 4.加载内容
        loadTabContent(param);
    }

    // 加载TabContent的内容
    function loadTabContent(param) {
        // 加载我的收藏数据
        if ("navTree2-1" == param){
            layui.use(['element', 'table'], function () {
                var element = layui.element;
                var table = layui.table;

                table.render({
                    elem: '#articleCollectList'
                    , url: '/article/collect/listForLayUI' //数据接口
                    , skin: 'line'
                    , size: 'lg'
                    , where: {
                        userId:userId
                    }
                    , page: true               //开启分页
                    , cols: [
                        [                      //表头
                            {field: 'id',title: 'id',width:'10%'},
                            {
                                field:'articleTitle',
                                title:'文章',
                                templet: '<div><a href="/article/article/showArticle/{{d.articleId}}" target="_blank" class="layui-table-link">{{d.articleTitle}}</a></div>'
                            },
                            {field: 'articleUserName',title:'作者',width:'10%'},
                            {title:'收藏时间',width:'20%',templet:function(d){
                                var time = new Date(d.createTime).Format("yyyy-MM-dd hh:mm:ss");
                                return time;
                                }},
                            {align: 'center', title: '操作', width: 180, templet: function(d){
                                    var htmls = '<a class="layui-btn layui-btn-xs" onclick="article_cancelCollect('+d.articleId+')">取消收藏</a>';
                                    return htmls;
                                }}
                        ]
                    ]
                });

            });
        }

        // 加载我的草稿数据
        if ("navTree2-2" == param){
            layui.use(['element', 'table'], function () {
                var element = layui.element;
                var table = layui.table;

                table.render({
                    elem: '#articleDraftList'
                    , url: '/article/article/listForLayUI' //数据接口
                    , skin: 'line'
                    , size: 'lg'
                    , where:{
                        isPublish:0,
                        userId:userId
                    }
                    , page: true               //开启分页
                    , cols: [
                        [                      //表头
                            {field: 'id',title: 'id',width:'10%'},
                            {field: 'title', title: '文章'},
                            {title:'创建时间',width:'20%',templet:function(d){
                                    var time = new Date(d.createTime).Format("yyyy-MM-dd hh:mm:ss");
                                    return time;
                                }},
                            {align: 'center', title: '操作', width: 180, templet: function(d){
                                    var htmls = '<a href="/article/article/editArticle/'+d.id+'" target="_blank" class="layui-table-link">编辑文章</a>';
                                    return htmls;
                                }}
                        ]
                    ]
                });
            });
        }

        // 加载我的文章数据
        if ("navTree2-3" == param){
            layui.use(['element', 'table'], function () {
                var element = layui.element;
                var table = layui.table;

                table.render({
                    elem: '#articlePublishList'
                    , url: '/article/article/listForLayUI' //数据接口
                    , skin: 'line'
                    , size: 'lg'
                    , where:{
                        isPublish:1,
                        userId:userId
                    }
                    , page: true               //开启分页
                    , cols: [
                        [
                            {field: 'id',title: 'id',width:'10%'},
                            {
                                field:'title',
                                title:'文章',
                                templet: '<div><a href="/article/article/showArticle/{{d.id}}" target="_blank" class="layui-table-link">{{d.title}}</a></div>'
                            },
                            {title:'创建时间',width:'20%',templet:function(d){
                                    var time = new Date(d.createTime).Format("yyyy-MM-dd hh:mm:ss");
                                    return time;
                                }}
                        ]
                    ]
                });
            });
        }

        // 加载我的问题数据
        if ("navTree3-1" == param){
            console.log("开始加载我的问题数据");
            layui.use(['element', 'table'], function () {
                var element = layui.element;
                var table = layui.table;
                console.log("开始渲染表单");
                table.render({
                    elem: '#questoinList'
                    , url: '/question/question/listForLayUI2' //数据接口
                    , skin: 'line'
                    , size: 'lg'
                    , where:{
                        userId:userId
                    }
                    , page: true               //开启分页
                    , cols: [
                        [
                            {field: 'id',title: 'id',width:'10%'},
                            {
                                field:'title',
                                title:'问题标题',
                                templet: '<div><a href="/question/question/showQuestion/{{d.id}}" target="_blank" class="layui-table-link">{{d.title}}</a></div>'
                            },
                            {title:'提问时间',width:'20%',templet:function(d){
                                    var time = new Date(d.createTime).Format("yyyy-MM-dd hh:mm:ss");
                                    return time;
                                }}
                        ]
                    ]
                });
            });
        }

        // 加载我的收藏数据
        if ("navTree3-2" == param){
            layui.use(['element', 'table'], function () {
                var element = layui.element;
                var table = layui.table;

                table.render({
                    elem: '#questionCollectList'
                    , url: '/question/collect2/listForLayUI' //数据接口
                    , skin: 'line'
                    , size: 'lg'
                    , where: {
                        userId:userId
                    }
                    , page: true               //开启分页
                    , cols: [
                        [                      //表头
                            {field: 'id',title: 'id',width:'10%'},
                            {
                                field:'questionTitle',
                                title:'问题标题',
                                templet: '<div><a href="/question/question/showQuestion/{{d.questionId}}" target="_blank" class="layui-table-link">{{d.questionTitle}}</a></div>'
                            },
                            {field: 'questionUserName',title:'作者',width:'10%'},
                            {title:'收藏时间',width:'20%',templet:function(d){
                                    var time = new Date(d.createTime).Format("yyyy-MM-dd hh:mm:ss");
                                    return time;
                                }},
                            {align: 'center', title: '操作', width: 180, templet: function(d){
                                    var htmls = '<a class="layui-btn layui-btn-xs" onclick="question_cancelCollect('+d.questionId+')">取消收藏</a>';
                                    return htmls;
                                }}
                        ]
                    ]
                });

            });
        }

        // 加载我的消息通知
        if ("navTree4" == param){
            $.ajax({
                url: '/user/user/messageList/'+userEmail,
                type: 'get',
                contentType: "application/json;charset=UTF-8",
                success: function (items) {
                    messageList = items;
                    var _html = "";
                    items.forEach(function(e){
                        _html = _html + "<div class=\"message-item\">"+ new Date(e.createTime).Format("yyyy-MM-dd hh:mm:ss")  + " " + e.content
                                        "</div>";
                    });
                    $("#messageList").html(_html);
                },
                error: function () {
                    $("#messageList").html("<p>数据加载异常</p>");
                }
            });
        }
    }

    // 文章取消收藏
    function article_cancelCollect(param) {
        var collectData = {
            "articleId":param,
            "userId":userId
        };
        $.ajax({
            url: '/article/collect/removeObj',
            type: 'post',
            async: false,
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(collectData),
            success: function (obj) {
                if (obj.code == 200){
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.open({
                            type: 0,
                            content: "操作成功"
                        });
                    });
                }else{
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.open({
                            type: 0,
                            content: "操作失败"
                        });
                    });
                }
            }
        });

        navTab("navTree2-1");
    }

    // 问题取消收藏
    function question_cancelCollect(param) {
        var collectData = {
            "questionId":param,
            "userId":userId
        };
        $.ajax({
            url: '/question/collect2/removeObj',
            type: 'post',
            async: false,
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(collectData),
            success: function (obj) {
                if (obj.code == 200){
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.open({
                            type: 0,
                            content: "操作成功"
                        });
                    });
                }else{
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.open({
                            type: 0,
                            content: "操作失败"
                        });
                    });
                }
            }
        });

        navTab("navTree3-2");
    }

    // 查看消息
    function seeMessage(p1,p2){
        console.log("p1:",p1);
        // 删除redis中相应消息
        var messageData = {
            "email":userEmail,
            "uuid":p1
        }
        $.ajax({
            url: '/user/user/delMessage',
            type: 'post',
            async: false,
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(messageData),
            success: function (obj) {
                if (obj.code != 200){
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.open({
                            type: 0,
                            content: "操作失败"
                        });
                    });
                    return;
                }
            }
        });
        // 进行页面跳转
        for(j = 0; j < messageList.length; j++) {
            var message = messageList[j];
            if (message.uuid == p1){
                if (message.type == 1){
                    window.location.href = "/article/article/showArticle/"+p2;
                    return;
                }else if (message.type == 2){
                    window.location.href = "/question/question/showQuestion/"+p2;
                    return;
                }
            }
        }
    }
</script>

</html>